<template>
  <div class="message_comp_box">
    <div class="top">
      <li
        class="header"
        :style="{
          'background-color': color_arr[index],
        }"
      >
        {{ obj.header }}
      </li>
      <li class="nick">{{ obj.nick }}</li>
      <li class="xh">
        <span v-for="(item, i) in obj.other" :key="i">{{ item }}</span>
      </li>
      <li class="time">{{ obj.time }}</li>
    </div>
    <div class="cont">{{ obj.content }}</div>
    <div class="hf" v-if="obj.webmaster">
      <span class="red"> 站长回复：</span>
      {{ obj.webmaster }}
    </div>
  </div>
</template>
<script>
import { ref } from "vue";

export default {
  props: {
    obj: {
      type: Object,
    },
  },
  setup(prop) {
    let obj = ref(prop.obj);
    let color_arr = ref([
      "#a18cd1",
      "#fbc2eb",
      "#84fab0",
      "#8fd3f4",
      "#e6dee9",
      "#fda085",
      "#fcb69f",
      "#a8edea",
      "#00f2fe",
      "#764ba2",
    ]);
    let random = (Min, Max) => {
      return Math.floor(Math.random() * (Max - Min) + Min);
    };
    let index = ref(random(1, 10));
    return {
      obj,
      random,
      index,
      color_arr,
    };
  },
};
</script>
<style lang="less">
@import url("../../assets/global/var.less");
.message_comp_box {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 20px;
  .top {
    // display: flex;
  }
  .top li {
    display: inline-block;
    vertical-align: middle;
  }
  .top .header {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border-radius: 50%;
    mix-blend-mode: saturation;
    color: #fff;
  }
  .top .nick {
    color: #1abc9c;
    font-size: 16px;
    margin-left: 20px;
  }
  .top .xh {
    margin-left: 10px;
  }
  .top .xh span {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #ededed;
    font-size: 12px;
    color: @navigation_bar_content_color;
    border-radius: 4px;
    margin-left: 10px;
  }
  .time {
    color: #999;
    font-size: 12px;
    float: right;
  }
  .cont {
    color: @navigation_bar_content_color;
    font-size: 16px;
    margin-left: 60px;
    margin-top: 20px;
    line-height: 2em;
    padding-bottom: 10px;
  }
  .hf {
    padding-left: 50px;
    background-color: #ededed;
  }
}
</style>